<template>
		<div class="gcmin">
			<header> 
				精品推荐
			</header>
			<div class="main">
				<div class="conbox" v-for="item in arrmin">
					<ul class="row1">
						<li class="firli lt"><img :src="item.userimg"></li>
						<li class="lt secli">
							<p>{{item.username}}</p>
							<h5>{{item.time}}</h5>
						</li>
						<li class="lastli rt">
							<h4>{{item.fannum}}</h4>
							<h3><button><i class="iconfont">&#xe610;</i>关注</button></h3>
						</li>
					</ul>
					<p>{{item.userspec}}</p>
					<ul class="row2">
						<li v-for="i in item.uerimgarr"><img :src="i"></li>
					</ul>
					<div class="compents">
						<p><i class="iconfont">&#xe608;</i>{{item.zan}}</p>
						<ul>
							<li v-for="imin in item.usercom">
								<span class="uname">{{imin.name}}</span>:
								<span>{{imin.con}}</span>						
							</li>
						</ul>
					</div>
				</div>				
			</div>
		</div>
</template>
<style type="text/css" lang="less" scoped>
	.gcmin{
		position: absolute;
		top: 40px;
		left: 0;
		bottom: 0;
		right: 0;
	}
	header{
		height: 40px;
		line-height: 40px;
		border-bottom: 0.3px solid #EAEAEA;
		text-align: left;
		padding-left: 20px;
		position: relative;
	}
	header:before{
		content: "";
		width: 2px;
		border-radius: 1px;
		height: 20px;
		background: #CD8500;
		left: 10px;
		top: 10px;
		position: absolute;
	}
	.main{
		background:#F2F2F2;
		margin-bottom: 50px;
		img{
			width: 100%;
			height: 100%;
		}
		.row1{
			padding: 10px 0;
			overflow: hidden;
			 li{
				display: inline-block;
				height: 60px;
				p{
					font-size: 15px;
					color:#5C5C5C;
					margin-bottom: 16px;
				}
				h5{
					font-size: 14px;
				}
				h4{
					font-size: 14px;
					margin-bottom: 12px;
				}
				h3{
					font-size: 15px;
					button{
						width: 60px;
						height: 24px;
						line-height: 24px;
						text-align: center;
						display: block;
						background: #EAEAEA;
						border: none;
						color:#5C5C5C;
						outline: none;
						border-radius: 4px;
						padding-right: 6px;
						i{
							color: #008B8B;
							font-size: 15px;
							float: left;
							margin-left: 6px;
							position: relative;
							/*top: 4px;*/
						}
					}
				}
			}
			.firli{
				margin-right: 10px;
				width: 60px;
			}
			.lastli{
				margin-right: 10px;
			}
			.secli{
				text-align: left;
			}	
		}
		.conbox{
			background: #fff;
			margin: 10px 0;
			padding: 0 10px 4px 10px;
		}
		.conbox>p{
			font-size: 15px;
			margin:8px 0;
			text-align: left;
		}
		.row2{
			overflow: hidden;
			width: 100%;
		}
		.row2 li{
			float: left;
			width: 90px;
			height: 88px;
			margin:1px 1px;
		}
		.compents{
			text-align: left;
			p{
				margin: 8px 0;
				font-size: 15px;
				color:#46938b ;
				i{
					position: relative;
					top: 3px;
					margin-right: 4px;
				}
			}
			ul li{
				color: #5C5C5C;
				font-size: 13px;
				margin: 6px 0;
				.uname{
					color:#22887d;
				}
			}
		}
	}
</style>

<script type="text/javascript">
	export default{
		data(){
			return{
				arrmin:[]
			}
		},
		components:{

		},
		methods:{
			getData(){
				var _this=this;
				_this.$http.get('../../static/data/flspeackmin.json').then(function(res){
					//console.log(res.data)
					_this.arrmin=res.data;
				}).catch(function(err){
					//console.log(err)
				})
			}
		},
		mounted(){
			this.getData();
		}
	}
</script>